<template>
  <div class="body">
    <div class="body_left">
      <BaseMenu
        :menuList="bodyLeft"
        :chidrenShow="chidrenShow"
        :chidrenShowTwo="chidrenShowTwo"
        @go="go"
      />
    </div>
    <div class="body_right">
      <!-- <el-card> -->
      <router-view></router-view>
      <!-- </el-card> -->
    </div>
  </div>
</template>

<script>
import BaseMenu from '@/components/baseMenu/baseMenu'

export default {
  name: 'index',
  components: {
    BaseMenu
  },
  data() {
    return {
      bodyLeft: [
        {
          path: '/wisdomPlanning/wisdomPlanningOverview',
          title: '规划看板',
          id: 481,
          icon: 'zhgh-ghkb'
        },
        {
          path: '/wisdomPlanning/projectLocation',
          title: '项目选址',
          id: 482,
          icon: 'zhgh-xmxz'
        },
        {
          path: '/wisdomPlanning/housingProjectManagement',
          title: '房建项目管理',
          id: 483,
          icon: 'zhgh-fjxmgl',
          children: [
            {
              path: '/wisdomPlanning/housingProjectManagement/basicElementService',
              title: '基础要素服务',
              id: 4831,
              icon: 'zhgh-jcysfw'
            },
            {
              path: '/wisdomPlanning/housingProjectManagement/projectGeneration',
              title: '项目生成',
              id: 4832,
              icon: 'zhgh-xmsc'
            },
            {
              path: '/wisdomPlanning/housingProjectManagement/ProjectApproval',
              title: '立项用地规划许可',
              id: 4833,
              icon: 'zhgh-lxydghxk'
            },
            {
              path: '/wisdomPlanning/housingProjectManagement/EngineeringConstructionPermit',
              title: '工程建设许可',
              id: 4834,
              icon: 'zhgh-gcjsxk'
            },
            {
              path: '/wisdomPlanning/housingProjectManagement/planningVerification',
              title: '建设工程规划核实',
              id: 4835,
              icon: 'zhgh-jsgcghhs'
            }
          ]
        },
        {
          path: 'test',
          title: '市政项目管理',
          id: 484,
          icon: 'zhgh-szxmgl',
          children: [
            {
              path: '/wisdomPlanning/MunicipalProjectManagement/complianceReview',
              title: '合规性审查',
              id: 4841,
              icon: 'zhgh-hgxsc'
            },
            {
              path: '/wisdomPlanning/MunicipalProjectManagement/lixiangshengcheng',
              title: '立项生成',
              id: 4842,
              icon: 'zhgh-lxsc'
            },
            {
              path: '/wisdomPlanning/MunicipalProjectManagement/useLandLicense',
              title: '用地规划许可',
              id: 4843,
              icon: 'zhgh-ydghxk'
            },
            {
              path: '/wisdomPlanning/MunicipalProjectManagement/gcjsghxk',
              title: '工程建设规划许可',
              id: 4844,
              icon: 'zhgh-gcjsghxk'
            },
            {
              path: '/wisdomPlanning/MunicipalProjectManagement/jsgcghhs',
              title: '建设工程规划核实',
              id: 4845,
              icon: 'zhgh-jsgcghhs1'
            }
          ]
        },
        {
          path: '/wisdomPlanning/PlanningVerticalManagement',
          title: '规划竖向管理',
          id: 485,
          icon: 'zhgh-ghsxgl'
        },
        {
          path: '/wisdomPlanning/DecisionSupport',
          title: '辅助决策',
          id: 486,
          icon: 'zhgh-fzjc'
        }
      ],
      chidrenShow: true,
      chidrenShowTwo: false
    }
  },
  computed: {
    routerPath() {
      return this.$route.path
    }
  },
  methods: {
    // 路由跳转
    go(path) {
      if (path.indexOf('/wisdomLand') > -1) {
        this.$router.push(path)
        this.chidrenShow = false
      } else if (path === 'rizhi') {
        this.chidrenShowTwo = !this.chidrenShowTwo
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  color: #000;
  height: calc(100vh - 60px);
  width: 100%;
  display: flex;

  &_left {
    width: 296px;
    height: 100%;
    z-index: 999;
    background: #fff;

    .item {
      width: 100%;
      height: auto;
      text-align: left;
      // padding-left: 22px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #4c565c;
      line-height: 50px;

      :hover {
        cursor: pointer;
      }
    }

    .activeItem {
      //background: red;
      background: rgba(234, 245, 253, 1);
      border-right: 3px solid #4a80a3;
      color: #497fa3;
      //color: #EAF5FD;
    }
  }

  &_right {
    display: flex;
    width: calc(100% - 296px);
    height: 100%;
    background: #eff3f9;

    .el-card {
      width: 100%;
      margin: 15px;
    }
  }
}
</style>
